<template>
  <div id="resultScroll" ref="myScrollbar" style="overflow: auto;">
   <ul>
      <!-- <swiper ref="mySwiper" :options="swiperOptions" style="height:1.15rem;background:red;">
      <swiper-slide class="slide-item">Slide 1</swiper-slide>
      <swiper-slide class="slide-item">Slide 2</swiper-slide>
      <swiper-slide class="slide-item">Slide 3</swiper-slide>
      <swiper-slide class="slide-item">Slide 4</swiper-slide>
      <swiper-slide class="slide-item">Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper> -->
    <li class="list" v-for="d in daimovie" :key="d.id">
      <!-- 左侧图片 -->
      <div class="list-l">
        <img :src="d.img.replace('/w.h/','/')" />
      </div>
      <!-- 右侧部分 -->
      <div class="list-r">
        <div class="list-t">
          <h3>{{d.nm}}</h3>
          <my-tip>
            <template v-slot>
              {{d.wish}}
              <span>人想看</span>
            </template>
          </my-tip>
        </div>
        <div class="list-b">
          <div>
            <p>{{d.cat}}</p>
            <p>{{d.desc}}</p>
            <p>{{d.rt}}上映</p>
          </div>
          <my-button type="default" style="border: 1px solid red;color: red;">
            <b>&#xe82a;</b>
            想看
          </my-button>
        </div>
      </div>
    </li>
   </ul>
  </div>

</template>
<script>
  // import {
  //   Swiper,
  //   SwiperSlide,
  //   directive
  // } from 'vue-awesome-swiper'
  // import 'swiper/swiper-bundle.css'
  import MyTip from "../../components/MyTip"
  import MyButton from "../../components/MyButton"
  import {
    mapState,
    mapActions,

  } from 'vuex'
  export default {
    data() {
      return {
        dept: this.daimovie,
        // swiperOptions: {
        //   pagination: {
        //     el: '.swiper-pagination'
        //   },
        //   // Some Swiper option/callback...
        // }
      }
    },
    components: {
      MyTip,
      MyButton,
      // Swiper,
      // SwiperSlide
    },
    // directives: {
    //   swiper: directive
    // },
    computed: {
     
      ...mapState('department', ['daimovie']),
      //  swiper() {
      //   return this.$refs.mySwiper.$swiper
      // },
    },
    mounted() {
      this.getDaiMovie()
      //  console.log('Current Swiper instance object', this.swiper)
      // this.swiper.slideTo(3, 1000, false)
    },
    methods: {

      ...mapActions('department', ['getDaiMovie']),

    }
  }
</script>
<style lang="scss" scoped>
  @import "../../assets/scss/mixin.scss";

  @font-face {
    font-family: 'iconfont';
    src: url('../../assets/icons/iconfont.eot');
    src: url('../../assets/icons/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../../assets/icons/iconfont.woff2') format('woff2'),
      url('../../assets/icons/iconfont.woff') format('woff'),
      url('../../assets/icons/iconfont.ttf') format('truetype'),
      url('../../assets/icons/iconfont.svg#iconfont') format('svg');
  }


    // .slide-item{
    //   max-width: 100%;
    // }
    .list {
    @include border-bottom-1px;
    padding: 0.12rem 0.12rem 0.12rem .12rem;
    display: flex;

    .list-l {
      margin-right: 0.1rem;

      img {
        height: .9rem;
        width: 0.64rem;
      }
    }

    .list-r {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .list-t {
        >h3 {
          font-size: .16rem
        }

        @include flex-layout(row, space-between);
      }

      .list-b {
        @include flex-layout(row, space-between);

        color: #666666;
        font-size: 0.14rem;

        b {
          @include icon;

        }

        // 超出部分使用省略号代替
        p {
          max-width: 2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>